ajax的使用一直是以jQuery为主,对于底层的实现有点不明觉厉。作为一个有追求的前端,这是不可以接受的。便让我们今晚好好走进ajax的内心世界。
ajax 两大特性:
- 在不刷新页面的情况下向服务器端发送请求
- 从服务器端接收数据,并进行对应的逻辑处理
ajax 请求流程
step-1
首先先建立一个异步请求对象
var httpRequest
if(window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
step-2
第一步的httpRequest对象设置已经好了。然后我们要做的就是设置我们的请求被响应时的动作
httpRequest.onreadystatechange = function(){
if(httpRequest.readyState === 4) {
// everything is good, the response is received
} else {
// still not ready
}
}
readyState 说明
- 0 ('UNSENT',未初始化,即httpRequest对象已创建,但是open()方法还没调用)
- 1 ('OPENED',载入中, 即请求已经open()过了,但是send()方法还没调用)
- 2 ('HEADERS_RECEIVED',已载入, 即send()过了,但是data数据还没返回)
- 3 ('LOADING',动态交互,即data数据已经接收到了,但是responseText内容会获取)
- 4 ('DONE',完成, 即全部data数据接收成功)
Response 属性
- status (返回状态码,比如1/2/3/4/500)
- statusText(返回状态文本,比如OK)
- responseType(返回响应的状态, 比如'loading','done')
- response (返回响应的具体内容)
- responseText(返回响应的具体文本内容)
step-3
然后来写一个简单的demo
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
<script>
(function(){
var httpRequest;
if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!httpRequest) {
alert('Giving up :( (Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreaystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
httpRequest.open('GET', url);
httpRequest.send();
})()
</script>
爱心小贴士:
- 如果发送请求之后返回的数据格式为XML时,那么在IE中需要设置http-header头, "Content-Type": application/xml 不然IE会抛出一个"Object Expected"的错误
- 如果你没有http-header Cache-Control: no-cache, 那么浏览器则会缓存请求,不会再发送新的请求。当然你还可以使用时间戳之类的形式来使每次请求的url不同,来绕过缓存问题。
- 在闭包中进行ajax相关的操作。
返回的数据为JSON时,应对数据进行相应的解析
function alertContents() {
if(httpRequest.readyState === 4) {
if(httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText);
} else {
alert('There was s problem with the request.');
}
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。